<script setup>
import { onMounted, ref } from 'vue'
import {getAreaList,delArea} from "../../api/area"
import areaDialog from './components/areaDialog.vue';
  const areaData = ref([])
  const data = ref({
    page:1,
    pageSize:5
  })
  const total = ref(0)
  const dialogRef = ref(null)
  onMounted(()=>{
    getAreaData()
  })
  const getAreaData = async()=>{
    const res = await getAreaList(data.value) 
    areaData.value = res.data.rows
    total.value = res.data.total
  }
  const handleSizeChange =(e)=>{
    data.value.pageSize = e
    getAreaData()
  }
  const handleCurrentChange =(e)=>{
    data.value.page = e
    getAreaData()
  }
  const openDialog = ()=>{
    dialogRef.value.isShow= true
    
  }
  const update =()=>{
    getAreaData()
  }
  const openEdit = (id)=>{
    dialogRef.value.isShow= true
    // dialogRef.value.getAreaDetail(id)
    const data = areaData.value.find(i=> i.id === id)
    dialogRef.value.form = JSON.parse(JSON.stringify(data))
  }
  const del= async(id)=>{
    await delArea(id)
    getAreaData()
  }
</script>

<template>
  <div class="area">
    <el-button class="button" type="primary" @click="openDialog">添加区域</el-button>

    <el-table :data="areaData" style="width: 100%">
    <el-table-column type="index" label="序号"  />
    <el-table-column prop="areaName" label="区域名称" width="180" />
    <el-table-column prop="spaceNumber" label="车位数(个)" width="180" />
    <el-table-column prop="areaProportion" label="面积(㎡)" width="180" />
    <el-table-column prop="ruleName" label="计费规则" width="180" />
    <el-table-column prop="remark" label="备注" width="180" />
    <el-table-column label="操作" width="180" >
      <template #default="{row}">
        <el-button link type="primary" @click="openEdit(row.id)">编辑</el-button>
        <el-button link  type="primary" @click="del(row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

   <el-pagination
      v-model:current-page="data.page"
      v-model:page-size="data.pageSize"
      :page-sizes="[5, 10, 20, 30]"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  <areaDialog ref="dialogRef" @update="update"></areaDialog>
  </div>
</template>

<style scoped>
.area{
  background-color: #fff;
  height: 100%;
  padding: 20px;
}
.button{
  margin-bottom: 20px;
}
</style>
